// 年级学科目标达成率

import React, {useEffect, useReducer} from 'react';
import {Select} from 'antd';
import {convertSearcherParams} from '~/page/FineBi/utils/convert';
import Config from '../Part4/config';


const key = 'group_status';
const reducer = (state, action) => ({...state, ...action});

const ZongheZubanLv = props => {
    const {dId, unitId, dimensionAndValues} = props;
    const [state, dispatch] = useReducer(reducer, {});
    const {
        curSelect,
        newDimensionAndValues = dimensionAndValues
    } = state;


    useEffect(() => {
        const addDimension = convertSearcherParams({[key]: '全部'});
        const newDimension = [...dimensionAndValues, ...addDimension];

        dispatch({
            curSelect: '全部',
            newDimensionAndValues: newDimension
        });
    }, [dimensionAndValues]);

    const handleChange = value => {
        const updateDimension = convertSearcherParams({[key]: value});
        const newDimension = [...dimensionAndValues, ...updateDimension];

        dispatch({
            curSelect: value,
            newDimensionAndValues: newDimension
        });
    };

    return (
        <div>
            <Config
                dId={dId}
                unitId={unitId}
                dimensionAndValues={newDimensionAndValues}
            >
                <div style={{marginBottom: 20}}>
                    <span>新老学员: </span>
                    <Select
                        onChange={handleChange}
                        value={curSelect}
                        style={{width: 200}}
                        getPopupContainer={ele => ele.parentElement}
                    >
                        <Select.Option label="全部" key="全部">
                            全部
                        </Select.Option>
                        <Select.Option label="新学员" key="新学员">
                            新学员
                        </Select.Option>
                        <Select.Option label="老学员" key="老学员">
                            老学员
                        </Select.Option>
                    </Select>
                </div>
            </Config>
        </div>
    );
};

export default ZongheZubanLv;

